import { NavBar, Button, TextArea, ImageUploader } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { useState } from 'react'

interface Message {
  id: string
  type: 'user' | 'assistant'
  content: string
  timestamp: Date
}

function Index() {
  const nav = useNavigate()
  const [symptomDescription, setSymptomDescription] = useState('')
  const [uploadedImages, setUploadedImages] = useState<any[]>([])
  const [showImageUpload, setShowImageUpload] = useState(false)
  const [showProfileSelection, setShowProfileSelection] = useState(false)
  const [messages, setMessages] = useState<Message[]>([
    {
      id: '1',
      type: 'assistant',
      content: '您好,我是您的医生助手。',
      timestamp: new Date()
    },
    {
      id: '2',
      type: 'assistant',
      content: '请在下方输入框详细描述病情,以便医生准确了解您的情况,快速接诊',
      timestamp: new Date()
    }
  ])
  
  const handleBack = () => {
    nav(-1)
  }

  const handleSubmit = async () => {
    if (symptomDescription.length < 5) {
      alert('请至少输入5个字符描述您的症状')
      return
    }
    
    if (symptomDescription.length > 500) {
      alert('描述不能超过500个字符')
      return
    }

    try {
      // 添加用户消息
      const userMessage: Message = {
        id: Date.now().toString(),
        type: 'user',
        content: symptomDescription,
        timestamp: new Date()
      }
      
      setMessages(prev => [...prev, userMessage])
      
      // 清空输入框
      setSymptomDescription('')
      
      // 模拟助手回复
      setTimeout(() => {
        const assistantMessage: Message = {
          id: (Date.now() + 1).toString(),
          type: 'assistant',
          content: '请上传能反应患者病情的相关资料，上传的资料仅自己和医生可见。',
          timestamp: new Date()
        }
        setMessages(prev => [...prev, assistantMessage])
        setShowImageUpload(true)
      }, 1000)
      
    } catch (error) {
      console.error('提交失败:', error)
      alert('提交失败，请重试')
    }
  }

  const handleConsentClick = () => {
    // 跳转到知情同意书页面
    nav('/privacy')
  }

  const handleImageUpload = (fileList: any[]) => {
    setUploadedImages(fileList)
  }

  const handleSkip = () => {
    // 添加用户"暂无图片"消息
    const userMessage: Message = {
      id: Date.now().toString(),
      type: 'user',
      content: '暂无图片',
      timestamp: new Date()
    }
    setMessages(prev => [...prev, userMessage])
    
    // 添加助手询问选择患者档案的消息
    setTimeout(() => {
      const assistantMessage: Message = {
        id: (Date.now() + 1).toString(),
        type: 'assistant',
        content: '请问您想为以下哪位患者咨询?',
        timestamp: new Date()
      }
      setMessages(prev => [...prev, assistantMessage])
      setShowProfileSelection(true)
    }, 500)
    
    // 隐藏图片上传区域
    setShowImageUpload(false)
  }

  const handleConfirm = () => {
    // 处理最终确认逻辑
    if (showImageUpload) {
      // 添加助手确认消息
      const confirmMessage: Message = {
        id: Date.now().toString(),
        type: 'assistant',
        content: '感谢您提供的信息，包括病情描述和图片资料。我们正在为您匹配最合适的医生，请稍候...',
        timestamp: new Date()
      }
      setMessages(prev => [...prev, confirmMessage])
      
      // 隐藏图片上传区域
      setShowImageUpload(false)
      
      // 可以在这里添加其他逻辑，比如显示匹配进度等
    }
  }

  const handleSelectProfile = () => {
    // 处理选择档案逻辑
    console.log('选择档案')
  }

  const handleCreateProfile = () => {
    // 跳转到新建档案页面
    nav('/file')
  }

  return (
    <div style={{ 
      width: '100vw', 
      minHeight: '100vh', 
      background: '#fff' 
    }}>
      {/* 导航栏 */}
      <NavBar 
        onBack={handleBack} 
        style={{ 
          background: '#fff',
          borderBottom: '1px solid #f0f0f0'
        }}
      >
        描述病情
      </NavBar>

      {/* 步骤进度指示器 */}
      <div style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        padding: '16px',
        background: '#fff',
        borderBottom: '1px solid #f0f0f0'
      }}>
        <div style={{
          display: 'flex',
          alignItems: 'center',
          gap: '8px'
        }}>
          <span style={{
            color: '#1677ff',
            fontWeight: 'bold',
            fontSize: '14px'
          }}>
            描述病情
          </span>
          <span style={{ color: '#ccc', fontSize: '12px' }}>›</span>
          <span style={{
            color: '#999',
            fontSize: '14px'
          }}>
            匹配医生
          </span>
          <span style={{ color: '#ccc', fontSize: '12px' }}>›</span>
          <span style={{
            color: '#999',
            fontSize: '14px'
          }}>
            开始咨询
          </span>
        </div>
      </div>

      {/* 服务保障 */}
      <div style={{
        display: 'flex',
        alignItems: 'center',
        padding: '16px',
        background: '#fff',
        borderBottom: '1px solid #f0f0f0'
      }}>
        <div style={{
          width: '24px',
          height: '24px',
          borderRadius: '50%',
          background: '#1677ff',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          marginRight: '12px'
        }}>
          <span style={{ color: '#fff', fontSize: '14px', fontWeight: 'bold' }}>+</span>
        </div>
    <div>
          <div style={{
            fontSize: '16px',
            fontWeight: 'bold',
            marginBottom: '4px'
          }}>
            服务保障
          </div>
          <div style={{
            fontSize: '12px',
            color: '#666',
            display: 'flex',
            gap: '8px'
          }}>
            <span>专业医生</span>
            <span style={{ color: '#ddd' }}>•</span>
            <span>实名认证</span>
            <span style={{ color: '#ddd' }}>•</span>
            <span>多轮沟通</span>
            <span style={{ color: '#ddd' }}>•</span>
            <span>超时退款</span>
          </div>
        </div>
      </div>

      {/* 知情同意书提示 */}
      <div style={{
        padding: '16px',
        background: '#fff',
        borderBottom: '1px solid #f0f0f0'
      }}>
        <div style={{
          fontSize: '12px',
          color: '#666',
          lineHeight: '1.5'
        }}>
          请您仔细阅读
          <span 
            style={{ 
              color: '#1677ff', 
              cursor: 'pointer',
              textDecoration: 'underline'
            }}
            onClick={handleConsentClick}
          >
            《风险告知及患者知情同意书》
          </span>
          ,如非复诊,我们仅提供医疗咨询服务。继续操作表示您知悉并同意上述告知内容。
        </div>
      </div>

      {/* 医生助手聊天界面 */}
      <div style={{
        padding: '16px',
        background: '#fff',
        minHeight: '300px'
      }}>
        {messages.map((message) => (
          <div
            key={message.id}
            style={{
              display: 'flex',
              alignItems: 'flex-start',
              marginBottom: '16px',
              justifyContent: message.type === 'user' ? 'flex-end' : 'flex-start'
            }}
          >
            {message.type === 'assistant' && (
              <div style={{
                width: '32px',
                height: '32px',
                borderRadius: '50%',
                background: '#1677ff',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                marginRight: '12px',
                flexShrink: 0
              }}>
                <span style={{ color: '#fff', fontSize: '16px' }}>👩‍⚕️</span>
              </div>
            )}
            
            <div style={{
              background: message.type === 'user' ? '#1677ff' : '#f5f5f5',
              color: message.type === 'user' ? '#fff' : '#333',
              borderRadius: message.type === 'user' 
                ? '12px 12px 4px 12px' 
                : '12px 12px 12px 4px',
              padding: '12px 16px',
              maxWidth: '80%',
              fontSize: '14px',
              lineHeight: '1.4',
              wordBreak: 'break-word'
            }}>
              {message.content}
            </div>
            
            {message.type === 'user' && (
              <div style={{
                width: '32px',
                height: '32px',
                borderRadius: '50%',
                background: '#e0e0e0',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                marginLeft: '12px',
                flexShrink: 0
              }}>
                <span style={{ color: '#666', fontSize: '16px' }}>👤</span>
              </div>
            )}
          </div>
        ))}
      </div>

      {/* 图片上传区域 */}
      {showImageUpload && (
        <div style={{
          padding: '16px',
          background: '#fff',
          borderTop: '1px solid #f0f0f0'
        }}>
          <div style={{
            fontSize: '16px',
            fontWeight: 'bold',
            marginBottom: '8px'
          }}>
            上传图片 (选填)
          </div>
          <div style={{
            fontSize: '12px',
            color: '#666',
            marginBottom: '12px'
          }}>
            检查单/历史病例/患处照片 (最多9张)
          </div>
          
          <ImageUploader
            value={uploadedImages}
            onChange={handleImageUpload}
            maxCount={9}
            style={{
              '--cell-size': '80px'
            }}
          />
          
          <div style={{
            display: 'flex',
            justifyContent: 'flex-end',
            marginTop: '12px'
          }}>
            <Button
              size="small"
              onClick={handleSkip}
              style={{
                color: '#666',
                background: 'transparent',
                border: '1px solid #d9d9d9'
              }}
            >
              跳过
            </Button>
          </div>
        </div>
      )}

      {/* 底部输入区域 */}
      {showProfileSelection ? (
        <div style={{
          position: 'fixed',
          bottom: 0,
          left: 0,
          right: 0,
          background: '#f5f5f5',
          borderTop: '1px solid #e0e0e0',
          padding: '16px',
          boxShadow: '0 -2px 8px rgba(0,0,0,0.1)'
        }}>
          <div style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center'
          }}>
            <div 
              onClick={handleSelectProfile}
              style={{
                color: '#333',
                fontSize: '16px',
                cursor: 'pointer'
              }}
            >
              选择档案
            </div>
            <div 
              onClick={handleCreateProfile}
              style={{
                color: '#1677ff',
                fontSize: '16px',
                cursor: 'pointer',
                display: 'flex',
                alignItems: 'center',
                gap: '4px'
              }}
            >
              <span style={{ fontSize: '18px' }}>+</span>
              新建档案
            </div>
          </div>
        </div>
      ) : !showImageUpload ? (
        <div style={{
          position: 'fixed',
          bottom: 0,
          left: 0,
          right: 0,
          background: '#fff',
          borderTop: '1px solid #f0f0f0',
          padding: '16px',
          boxShadow: '0 -2px 8px rgba(0,0,0,0.1)'
        }}>
          <div style={{
            display: 'flex',
            alignItems: 'flex-end',
            gap: '12px'
          }}>
            <div style={{ flex: 1 }}>
              <TextArea
                placeholder="请用5-500字描述具体症状、患病时长、用药情况、需要医生提供哪些帮助等, 以便医生更好帮助您解决问题。"
                value={symptomDescription}
                onChange={setSymptomDescription}
                maxLength={500}
                rows={3}
                style={{
                  fontSize: '14px',
                  borderRadius: '8px',
                  border: '1px solid #d9d9d9'
                }}
              />
              <div style={{
                textAlign: 'right',
                fontSize: '12px',
                color: '#999',
                marginTop: '4px'
              }}>
                {symptomDescription.length}/500
              </div>
            </div>
            <Button
              color="primary"
              onClick={handleSubmit}
              style={{
                borderRadius: '8px',
                height: '40px',
                padding: '0 16px',
                fontSize: '14px',
                fontWeight: 'bold'
              }}
            >
              提交
            </Button>
          </div>
        </div>
      ) : (
        <div style={{
          position: 'fixed',
          bottom: 0,
          left: 0,
          right: 0,
          background: '#fff',
          borderTop: '1px solid #f0f0f0',
          padding: '16px',
          boxShadow: '0 -2px 8px rgba(0,0,0,0.1)'
        }}>
          <Button
            color="primary"
            onClick={handleConfirm}
            style={{
              width: '100%',
              height: '48px',
              borderRadius: '8px',
              fontSize: '16px',
              fontWeight: 'bold'
            }}
          >
            确定
          </Button>
        </div>
      )}

      {/* 底部占位，避免内容被输入框遮挡 */}
      <div style={{ height: '120px' }} />
    </div>
  )
}

export default Index